<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>씨바 옵션, 씨바</title>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
	var api = chrome.extension.getBackgroundPage();

	function close() {
		$("#content").css("-webkit-transform", "scale(0.001)");
		$("body").css("background-color", "black");
		setTimeout(function() {
			chrome.tabs.getSelected(null, function(tab) {
				chrome.tabs.remove(tab.id);
			});
		}, 500);
	}

	function load() {
		$('input[type="checkbox"]').each(function(index) {
			var checkbox = $(this);
			$(this).next().css("cursor", "pointer").click(function() {
				if ($(checkbox).attr("checked")) {
					$(checkbox).removeAttr("checked");
				} else {
					$(checkbox).attr("checked", "checked");
				}
				console.log($(checkbox));
			});
		});

		if (api.config.showBanner == true) {
			$("#show-banner").attr("checked", "checked");
		}

		$("#hide-time").attr("value", api.config.hideTime);
		$("#save-button")
				.click(
						function() {
							api.config.showBanner = ($("#show-banner").attr(
									"checked") != undefined);
							api.config.hideTime = $("#hide-time").attr("value");
							api.config.save();
							close();

						});
	}
</script>
<style type="text/css">
body {
	background-color: #333;
	font-family: 나눔고딕, NanumGothic, AppleGothic, 돋움, serif;
	-webkit-transition: all 0.4s ease-in-out;
}

#page {
	margin: 30px auto;
	width: 500px;
}

#content {
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	-webkit-transition: all 0.2s ease-in-out;
}

.config-item {
	background-color: #eee;
	padding: 10px;
	border-bottom: solid 1px silver;
	border-top: solid 1px white;
}

.config-item:hover {
	background-color: #f5f5f5;
}

#content>:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top: none;
}

#content>:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom: none;
}

#footter {
	text-align: right;
}

.button {
	display: inline-block;
	border-radius: 5px;
	border: solid 1px rgba(0, 0, 0, 0.3);
	padding: 5px 20px;
	box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.2);
	background-color: white;
	cursor: pointer;
}

.button:hover {
	background-color: #eee;
}

.button:active {
	box-shadow: inset 0px 3px 15px rgba(0, 0, 0, 0.3);
}

#hide-time {
	width: 60px;
}
</style>
</head>
<body onload="load()">
	<div id="page">
		<div id="content">
			<div class="config-item">
				<input id="show-banner" type="checkbox" value="yeah"><span>씨바스런
					페이지를 열면 씨바 배너 보이기</span>
			</div>
			<div class="config-item">
				<input id="hide-time" type="number"> <span>초 후에 배너를
					자동으로 숨김 (0: 자동으로 숨기지 않음)</span>
			</div>
			<div class="config-item" style="text-align: right;">
				<div class="button" id="save-button">저장후 닫기</div>
			</div>
		</div>
	</div>
</body>
</html>